<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" row-key="dbSourceId" stripe>
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column label="考勤标题" prop="title" width="200"></el-table-column>
				<el-table-column label="上班时间" prop="beginTime" width="100"></el-table-column>
				<el-table-column label="下班时间" prop="endTime" width="100"></el-table-column>
				<el-table-column label="是否启用" prop="status" width="100">
					<template #default="scope">
						<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="1" inactive-value="0"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="纬度" prop="lat" width="150"></el-table-column>
				<el-table-column label="经度" prop="lon" width="150"></el-table-column>
				<el-table-column label="参考点" prop="address" width="200"></el-table-column>
				<el-table-column label="打卡范围" prop="disc" width="100">
					<template #default="scope">
						{{scope.row.disc}}米
					</template>
				</el-table-column>
				<el-table-column label="备注" prop="remark" width="200"></el-table-column>
			
				<el-table-column label="操作" fixed="right" align="right" width="120">
			
					<template #default="scope">
						<!-- <dutya  :msg ="scope.row" style="display: none;"></dutya> -->
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)" >编辑</el-button>
							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="primary" size="small">删除</el-button>
								</template>
							</el-popconfirm>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<el-dialog :title="titleMap[mode]" v-model="visible" :width="450" destroy-on-close @closed="$emit('closed')">
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="100px" label-position="left">
			<el-form-item label="排序号">
				<el-input-number v-model="form.sortNo" placeholder="排序号"></el-input-number>
			</el-form-item>
			<el-form-item label="规则名称" prop="title">
				<el-input v-model="form.title" placeholder="规则名称"></el-input>
			</el-form-item>
			<el-form-item label="上班时间" prop="beginTime">
				<el-time-picker v-model="form.beginTime" placeholder="结束时间" format = 'HH:mm' value-format = 'HH:mm' endTime style="width: 100%;"></el-time-picker>
			</el-form-item>
			<el-form-item label="下班时间" prop="endTime">
				<el-time-picker v-model="form.endTime" placeholder="结束时间" format = 'HH:mm' value-format = 'HH:mm' style="width: 100%;"></el-time-picker>
			</el-form-item>
			<el-form-item label="纬度" prop="lat">
				<el-input-number v-model="form.lat" placeholder="纬度" style="width: 100%" readonly></el-input-number>
			</el-form-item>
			<el-form-item label="经度" prop="lon">
				<el-input-number v-model="form.lon" placeholder="经度" style="width: 100%" readonly></el-input-number>
			</el-form-item>
			<el-form-item label="打卡范围" prop="disc">
				<el-input-number v-model="form.disc" placeholder="打卡范围"></el-input-number>米  注:0为不限制
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="form.remark" maxlength="150" placeholder="备注" size="200" minlength="380"></el-input>
			</el-form-item>
			<!-- {{form.configId}} -->
			<dutya  ref="dutya" @success="getLocationData" :msg ="form.configId" ></dutya>
	
		</el-form>
		<template #footer>
			<el-button type="primary" :loading="isSaveing" :success ="getLocationData" @click="submit">保存</el-button>
			<el-button @click="visible=false">取消</el-button>
		</template>
	</el-dialog>

</template>

<script>
import dutya from './dingwei.vue'
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
	securityJsCode: '2b06d933467ca1ee8950bbe7aacfee84' // 高德控制台获取
}
export default {

	name: 'Attend Setting',
	components: {
		dutya
	},
	data() {
		return {
			map: null,
			geocoder: null,
			companyName: '',
			lng: '',
			lat: '',
			address: '',
			titleMap: {
				add: '新增',
				edit: '编辑'
			},
			mode: "add",
			visible: false,
			isSaveing: false,
			apiObj: this.$API.system.attendConfig.getAttendConfigList,
			selection: [],
			form:{
				configId:"",
				sortNo:1,
				title:"",
				beginTime:"",
				endTime:"",
				disc:0,
				lat:"",
				lon:"",
				address:'',
				status:"1",
				remark:""
			},
			form1:{
				configId:"",
				sortNo:1,
				title:"",
				beginTime:"",
				endTime:"",
				status:"1",
				remark:""
			},
			rules:{
				title: [
					{required: true, message: '规则名称不能为空', trigger: 'blur'}
				],
				beginTime: [
					{required: true, message: '上班时间不能为空', trigger: 'blur'}
				],
				endTime: [
					{required: true, message: '下班时间不能为空', trigger: 'blur'}
				],
			}
		}
	},
	mounted() {

	},
	methods: {
		getLocationData(data){
			this.form.lon = data.lng
			this.form.lat =  data.lat
			this.form.address = data.address
		},
		// 搜索地址
		async searchLocation(address) {

			// 提交审批逻辑
			let params = {
				"address": address
			};
			this.$API.hr.hrRegularization.getTheCoordinates.get(params).then(res => {
				console.log("审批成功", res);
				this.lng = res.data.longitude;
				this.lat = res.data.latitude;
				this.address = address
				// 更新地图中心点
				this.map.setCenter([this.lng, this.lat])
				// 清除旧标记
				this.map.clearMap()
				// 添加新标记
				new AMap.Marker({
					position: [this.lng, this.lat],
					map: this.map
				})
			}).catch(err => {
				this.$message.error('获取当前坐标失败');
				console.error("接口调用失败", err);
			});
		},
		//增加
		add() {
			this.visible = true;
			this.mode = "add";
			this.form.configId = "";
			this.setData(this.form);
		},
		//编辑
		table_edit(row) {
			this.visible = true;
			this.mode = "edit";
			this.setData(row);
		},
		//删除
		async table_del(row, index) {
			var res = await this.$API.system.attendConfig.deleteAttendConfig.post({configId: row.configId});
			if (res.code == 200) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		//本地更新数据
		handleSuccess() {
			this.$refs.table.refresh()
		},
		setData(data) {
			this.form.configId = data.configId;
			this.form.sortNo = data.sortNo;
			this.form.title = data.title;
			this.form.beginTime = data.beginTime;
			this.form.endTime = data.endTime;
			this.form.lat = data.lat
			this.form.lon = data.lon
			this.form.address = data.address
			this.form.disc = data.disc
			this.form.status = data.status;
			this.form.remark = data.remark
		},
		async changeSwitch(val, row) {
			row.status = row.status == '1' ? '0' : '1'
			row.$switch_status = true;
			delete row.$switch_status;
			row.status = val;
			var res = await this.$API.system.attendConfig.updateAttendConfig.post({
				configId: row.configId,
				status: row.status
			});
			if (res.code == 200) {
				this.$refs.table.refresh()
				this.$message.success(res.message)
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
				row.status = 0;
			}
		},
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res;
					if (this.mode == "add") {
						res = await this.$API.system.attendConfig.insertAttendConfig.post(this.form);
					} else if (this.mode == "edit") {
						res = await this.$API.system.attendConfig.updateAttendConfig.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 200) {
						this.handleSuccess()
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				}
			})
		},
	}
}
</script>

<style>
.container {
	padding: 20px;
	width: 100%;
	height: 600px;
}

#map-container {
	width: 100%;
	height: 400px;
	margin: 20px 0;
	border: 1px solid #ddd;
}

.search-input {
	margin-bottom: 20px;
	width: 400px;
}

.result-box {
	margin-top: 20px;
}
</style>
